<template>
<div class="miss" >
  <div class="login" v-if="state.isLoginPage" >
    <div class="login-head">登录</div>
    <div class="login-content">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field v-model="state.phone" name="用户名" label="账号" placeholder="账号" />
          <van-field v-model="state.password" type="password" name="密码" label="密码" placeholder="密码" />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            登录
          </van-button>
        </div>
      </van-form>
    </div>
    <div class="login-register" @click="change">
      <p>没有账号?点击注册</p>
    </div>
  </div>

  <div class="register" v-else>
    <div class="register-head">注册</div>
    <div class="register-content">
      <van-form>
        <van-cell-group inset>
          <van-field v-model="state.phone" name="用户名" label="账号" placeholder="账号" />
          <van-field v-model="state.password" type="password" name="密码" label="密码" placeholder="密码" />
          <van-field v-model="state.password2" type="password" name="密码" label="确认密码" placeholder="确认密码" />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            登录
          </van-button>
        </div>
      </van-form>
    </div>
    <div class="login-register" @click="change">
      <p>已有账号?点击登录</p>
    </div>
  </div>

</div>

</template>

<script setup>
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import axios from '@/api'
const router = useRouter()
const state = reactive({
  isLoginPage:true,
  data:[],
  phone: '',
  password: '',
  password2: '',
  backImg:'',
  head:'',
  userName:'',
  phone:'',
  friends:'',
  userSign:'',
  token:''
})

const change = () => {
  state.isLoginPage = !state.isLoginPage
}
const onSubmit = async() => {
  // console.log(store.state.userInfo);
  try {
    const { data } = await axios.get('users/login',{
      params:{
        phone: state.phone,
        password: state.password
      }
    })
    console.log(data);
    state.backImg = data[0].backImg
    state.head = data[0].head
    state.userName = data[0].userName
    state.phone = data[0].phone
    state.friends = data[0].friends
    state.userSign = data[0].userSign
    localStorage.setItem("userToken",data[0].userId);
    
  } catch (error) {
    console.log(error)
  }
  // store.dispatch('changeAction')
  // state.isLogin = store.dispatch('changeAction')
  router.push('/me')
}

</script>

<style lang="less" scoped>
.login {
  margin-top: 5rem;

  .login-head {
    text-align: center;
    font-size: 0.5rem;
    margin-bottom: 1rem;
  }

  .login-register {
    text-align: center;
    font-size: 0.25rem;
    margin-top: 1rem;
    color: lightblue;
  }

}

.register {
  margin-top: 5rem;

  .register-head {
    text-align: center;
    font-size: 0.5rem;
    margin-bottom: 1rem;
  }

  .login-register {
    text-align: center;
    font-size: 0.25rem;
    margin-top: 1rem;
    color: lightblue;
  }

}

</style>